<template>
	<view v-if="istype=='客户端'">
		<Index @isactivefun="change" v-show="isactive==0"></Index>
		<Allclass ref="isallclass" v-show="isactive==1"></Allclass>
		<Order ref="order" v-show="isactive==2" @changes="changes"></Order>
		<User v-show="isactive==3"></User>
		<view class="box">
			<view @click="change" :data-index="index" :data-url="item.url" :key="index" v-for="(item,index) in list" class="actBox">
				<image class="img" :src="`../../static/img/components/${index === isactive?item.act:item.img}.png`">
				</image>
				<view class="title"  :class="index === isactive?'act':''">{{item.title}}</view>
			</view>
		</view>
	</view>
	<view v-if="istype=='师傅端'">
		<sindex  v-show="isactive==0"></sindex>
		<sorder ref="isallclass" v-show="isactive==1"></sorder>
		<smessage ref="order" v-show="isactive==2" @changes="changes"></smessage>
		<smine v-show="isactive==3"></smine>
		<view class="box">
			<view @click="change" :data-index="index" :data-url="item.url" :key="index" v-for="(item,index) in list" class="actBox">
				<image class="img" :src="`../../static/img/components/${index === isactive?item.act:item.img}.png`">
				</image>
				<view class="title"  :class="index === isactive?'act':''">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
  import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const { statusBarHeights,top,Jnheight} = storeToRefs(navStore);//解构数据
	const {proxy} = getCurrentInstance()
	
	import Index from '../index/index.vue'
	import Allclass from '../allclass/allclass.vue'
	import Order from '../order/order.vue'
  import User from '../user/user.vue'
	import Tabbar from './tabbar.vue'
	import sindex from '../sindex/sindex.vue'
	import smessage from '../smessage/smessage.vue'
	import smine from '../smine/smine.vue'
	import sorder from '../sorder/sorder.vue'
	const isactive = ref(0)
	const order = ref(null)
	const list = ref([])
	const isallclass = ref(null)
	const istype = ref('')
	
	const change=(e)=> {
		if(e.currentTarget){
			isactive.value = e.currentTarget.dataset.index
		}else{
			isactive.value = e
		}
		if(istype.value=='客户端'){
			if(isactive.value==1){
				isallclass.value.getDetail()
			}else if(isactive.value==2){
				order.value.orderNoticeNumfun()
				order.value.clearred()
			}
		}
		
	}

	
	
	onLoad((options)=>{
		istype.value = uni.getStorageSync('istype')
		if(options.isactive){
			isactive.value = options.isactive
		}
		if(options.istype){
			istype.value = options.istype
		}
		
	  if(istype.value=='师傅端'){
			list.value=[{title:'首页',img:'home',act:'homeAct',url:'/pages/home/home'},
			{title:'订单',img:'allclass',act:'allclassAct',url:'/pages/home/allClass'},
			{title:'消息',img:'order',act:'orderAct',url:'/pages/order/order'},
			{title:'我的',img:'user',act:'userAct',url:'/pages/user/user'},
			]
					
		}else{
			list.value=[{title:'主页',img:'home',act:'homeAct',url:'/pages/home/home'},
			{title:'服务',img:'allclass',act:'allclassAct',url:'/pages/home/allClass'},
			{title:'订单',img:'order',act:'orderAct',url:'/pages/order/order'},
			{title:'我的',img:'user',act:'userAct',url:'/pages/user/user'},
			]
		}
	})

</script>

<style lang="scss">
 .img {
		width: 50rpx;
		height: 50rpx;
	}
	.box {
		background-color: white;
		width: 750rpx;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		box-shadow: 4rpx 4rpx 10rpx rgba(189, 189, 189, 0.4);
		display: flex;
		justify-content: space-around;
		z-index: 99999999999;

		.actBox {
			margin-top: 10rpx;
			display: flex;
			width: 100rpx;
			
			flex-direction: column;
			
			align-items: center;

			.act {
				color: #51a0fd;
			}
			.title{
				font-size: 22rpx;
				margin-top: 8rpx;
				
			}
		}
	}
</style>
